<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-html="message"></div>
</div>

<div id="author"></div>
<author></author>

<script>
    new Vue({
        el: '#app',
        data: {
            message: '<h1>菜鸟教程</h1>'
        },
        render : function(creartrElement){
            return createElement(
                'h'+this.level,
                this.$solts.default
            )
        },
        props:{
            level:{
                type: Number,
                required:true
            }
        }
    })

    //Vue.extend(options)
    //使用 Vue构造器， 创建一个“子类”， 参数是一个包含组件选项的对象，其中data选项中必须是函数
    //该函数 返回一个“扩展实例构造器”==（预设部分选项的Vue实例）， 传入参数 ，返回一个组件

    var author = Vue.extend({
        template :"<p><a :href='url'>{{author}}  {{name}}</a></p>",
        data:function () {
            return {
                author:'vamous',
                url:"http://baido.com"
            }
        },
        props:['name']
    })
    new author({propsData:{name:'propsData 传递的name'}}).$mount('author');
</script>
</body>
</html>